<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的购物车-卓应商城</title>
		
		<link rel="stylesheet" type="text/css" href="/common/css/shopcar/shopcart.css" />
		<script type="text/javascript" src="/common/js/jquery-1.11.3.js"></script>
		
		<script>
			$(document).ready(function() {

				//topbar中的下拉列表鼠标悬停事件
				$(".user").mouseover(function() {
					$(".user-menu").removeClass("hide");
				});
				$(".user").mouseout(function() {
					$(".user-menu").addClass("hide");
				});

				//推荐列表中加入购物车的鼠标悬停移开事件
				$(".xm-recommend-list").mouseover(function() {
					$(this).find(".xm-recommend-btn").show();
				});
				$(".xm-recommend-list").mouseout(function() {
					$(this).find(".xm-recommend-btn").hide();
				});

				//全选框
				$("#checkAll").click(function() {
					$("#checkAll").prop("checked",$(this).prop("checked"));
					$(".input-checkbox").prop("checked",$(this).prop("checked"));
					$(".no-select-tip").addClass("hide");
				});
				$(".input-checkbox").on("change", function() {
					$strs = $(".input-checkbox");

					$("#checkAll").prop("checked",
							($strs.length == $strs.filter(":checked").length)?true:false);

					$(".no-select-tip").addClass("hide");
				});

				//计算总价格
				$("input[type=checkbox]").on("change", function() {
					var sum = 0.0;
					//选中加上
					$("input[name=checkname][type=checkbox]").each(function(i, obj) {
						if(obj.checked) {
							var price = parseFloat($(obj).parents(".item-row").find(".col-total").text());
							sum += price;
						}
					});
					$(".total-price").text(sum);
					$(".no-select-tip")
						.addClass("hide");
				});

				//商品数量加减点击事件
				$(".minus").click(function() {
					var count = $(this).parent().find("input");
					var price = $(this).parent().parent().parent().find(".span-price");
					var total = $(this).parent().parent().parent().find(".span-total");

					if(parseInt(count.val()) == 1) {
						alert("商品数量不能小于1");
						return;
					}

					var carId = $(this).parent().parent().parent().find(".input-checkbox").val();
					//发送ajax请求
					$.post("${path}/shopcar/minuscount", {
						"carId": carId,
					}, function(data) {
						if(data == "success") {
							count.val(parseInt(count.val()) - 1);
							total.text(parseInt((price.text()) * (count.val())));
							getTotal();
						}else{
							alert("操作失误");
						}
					});
				});
				//商品数量加减点击事件
				$(".plus").click(function() {
					var count = $(this).parent().find("input");
					var price = $(this).parent().parent().parent().find(".span-price");
					var total = $(this).parent().parent().parent().find(".span-total");

					var carId = $(this).parent().parent().parent().find(".input-checkbox").val();
					//发送ajax请求
					$.post("${path}/shopcar/pluscount", {
						"carId": carId,
					}, function(data) {
						if(data == "success") {
							count.val(parseInt(count.val()) + 1);
							total.text(parseInt((price.text()) * (count.val())));
							getTotal();
						}else{
							alert("操作失误");
						}
					});
				});

				//结算
				$("#payfor").click(function() {
					if($(":checkbox:checked[name=checkname]").length == 0) {
						$(".no-select-tip").removeClass("hide");
						return false;
					}
					$(".shopcar-form").attr("action","/order/commit");	//要改
					$(".shopcar-form").submit();
				});

				//计算总价格
				function getTotal() {
					var sum = 0.0;
					//选中加上
					$("input[name=checkname][type=checkbox]").each(function(i, obj) {
							if(obj.checked) {
								var price = parseFloat($(obj).parents(".item-row").find(".col-total").text());
								sum += price;
							}
						});
					$(".total-price").text(sum);
				}
				
				
			});
		</script>
		
	</head>
	
	<body>
		<div class="site-header">
			<div class="container">
				<div class="header-logo">
					<a class="logo" href="/user/loginreg/index" title="卓应官网">
						<img src="http://localhost:8083/fileserver/logo/logo.jpg" />
					</a>
				</div>
				<div class="header-title">
					<h2>我的购物车</h2>
				</div>
				<div class="topbar-login">
					<span class="user"> 
					<a class="username" rel="nofollow" href="/user/userinfo">
						<span class="name">${user.userName}</span>
					<i class="iconfont">﹀</i>
					</a>
					<ul class="user-menu hide">
						<li>
							<a rel="nofollow" href="/user/userinfo">个人中心</a>
						</li>
						<li>
							<a rel="nofollow" href="/user/mycollect">我的收藏</a>
						</li>
						<li>
							<a rel="nofollow" href="/user/loginreg/login">退出登录</a>
						</li>
					</ul>
					</span>
					<span class="sep">|</span>
					<a class="link order" rel="nofollow" href="/order/show" target="_self">我的订单</a>
				</div>
			</div>
		</div>

		<div class="page-main">
			<div class="container">
				<div class="cart-goods">
					<div class="cart-goods-list">
						<form action="" method="post" class="shopcar-form">
							<div class="list-head">
								<div class="col col-check">
									<input class="input-checkbox-all" id="checkAll" type="checkbox" />全选
								</div>
								<div class="col col-img"></div>
								<div class="col col-name">商品名称</div>
								<div class="col col-price">单价</div>
								<div class="col col-num">数量</div>
								<div class="col col-total">小计</div>
								<div class="col col-action">操作</div>
							</div>
							<div class="list-body">
								<c:forEach items="${shopcar.items}" var="item" varStatus="i">
									<div class="item-box">
										<div class="item-table">
											<div class="item-row">
												<div class="col col-check">
													<input class="input-checkbox" type="checkbox" name="checkname" value="${item.carId}"></input>
												</div>
												<div class="col col-img">
													<a href="/product/pro?pid=${item.carProduct.pId}" target="_blank"> <img src="http://localhost:8083/fileserver/wares/${item.waresImg}" width="80px" height="80px" />
													</a>
												</div>
												<div class="col col-name">
													<div class="tags"></div>
													<div class="tags"></div>
													<h3 class="name">
														<a href="/product/pro?pid=${item.carProduct.pId}" target="_blank">${item.carProduct.proName}
														${item.carProduct.color} ${item.carProduct.edition}</a>
													</h3>
												</div>
												<div class="col col-price">
													<span class="span-price">${item.carProduct.price}</span>元
												</div>
												<div class="col col-num">
													<div class="change-goods-num">
														<a class="minus">-</a>
														<input class="num-input" type="text" value="${item.waresCount}" readonly="readonly" />
														<a class="plus">+</a>
													</div>
												</div>
												<div class="col col-total">
													<span class="span-total">${(item.carProduct.price)*(item.waresCount)}</span>元
												</div>
												<div class="col col-action">
													<a class="del" href="/shopcar/delitem?carId=${item.carId}" title="删除"> <i class="iconfont">×</i>
													</a>
												</div>
											</div>
										</div>
									</div>
								</c:forEach>
							</div>
						</form>
					</div>
					<div class="raise-buy-box"></div>
					<div class="cart-goods-bar">
						<div class="section-left">
							<a class="continue-shopping" href="/product/fytype">继续购物</a>
						</div>
						<span class="span-total"> 合计: <span class="total-price">0</span> 元
						</span>
						<a id="payfor" class="btn btn-primary btn-a">去结算</a>
						<div class="no-select-tip hide">请勾选需要结算的商品</div>
					</div>
				</div>
				<div class="cart-recommend container">
					<h2 class="cart-recommend-title">
						<span>为您推荐</span>
					</h2>
					<div class="xm-recommend">
						<ul class="row">
							<c:forEach items="${list}" var="pro" varStatus="i">
								<li class="xm-recommend-list span4">
									<dl>
										<dt>
										<a href="/product/pro?pid=${pro.pId}"
											target="_blank"> <img src="http://localhost:8083/fileserver/wares/${pro.img}" />
										</a>
									</dt>
										<dd class="xm-recommend-name">
											<a href="/product/pro?pid=${pro.pId}" target="_blank">${pro.proName} ${pro.color} ${pro.edition}</a>
										</dd>
										<dd class="xm-recommend-price">${pro.price}元</dd>
										<dd class="xm-recommend-tips">
											<a class="btn btn-small btn-line-primary xm-recommend-btn" 
												href="/shopcar/addcar?waresId=${pro.pId}&waresColor=${pro.color}&waresEdition=${pro.edition}&waresPrice=${pro.price}&waresImg=${pro.img}">加入购物车</a>
										</dd>
									</dl>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="site-info">
			<div class="footer w1210 bc mt10">
			<div class="mt20">Joinlabs商城|JYUI|聊|多看书城|JY路由器|视频电话|JY天猫店|JY淘宝直营店|JY网盟|JY移动|隐私政策|Select Region</div>
			<div>©JY.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</div>
		</div>
	</body>
</html>